<template>
	<view>
		<view class="bti">
			<!-- 			登录 -->
		</view>
		<view class="conter">
			<view class="box1">
				<view class="content">
					<image class="img" src="@/static/images/iconsj.png" mode=""></image>
					<input class="input" type="text" placeholder="请输入手机号" v-model="name">
					<button class="btn"></button>
				</view>
				<view class="content">
					<image class="img" src="@/static/images/iconmm.png" mode="" @tap="displayPassword=!displayPassword">
					</image>
					<input class="input" type="text" placeholder="请输入密码" v-model="pass" :password="displayPassword"/>
					<button class="btn"></button>
					
				</view>
				<checkbox-group class="jizhu" @change="jizhu">
					<label>
						<checkbox value="cb" checked="true" color="#FFCC33" style="transform:scale(0.7)" />记住密码
					</label>
				</checkbox-group>
			</view>
			<view>
				
			</view>
			<view class="box2">
				<button class="tem1 bg-blue" :class="[(name&&pass)?'':'light']" @tap="goLogin">登录</button>
				<!-- 	<button class="tem1" v-else style="background-color: #808080;">登录</button> -->
				<navigator url="../register/register" class="text-blue w-670 text-right fs-24 margin-top padding">
					没有账号去注册</navigator>

				<view class="tem2">
					<view class="text1">点击登录，即表示同意</view>
					<view class="text2">用户注册协议，雨点金融隐私政策</view>
				</view>
			</view>
		</view>
		<view class="foot">
			<view class="swper1">其它登录方式</view>
			<view class="swper2">
				<image src="@/static/images/qq.png" mode=""></image>
				<image src="@/static/images/wx.png" mode=""></image>
				<image src="@/static/images/wb.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex"
	const {
		mapActions,
		mapState,
		mapMutations
	} = createNamespacedHelpers("users")
	export default {
		data() {
			return {
				// name: "17760330334",
				
				// name: "17760330334",
				displayPassword: true,
				ju:true//记住密码
			}
		},
		
		computed:{
			pass:{
				get(){
					return this.$store.state.users.pass
				},
				set(value){
					this.changepass(value)
				}
			},
				
			name:{
				get(){
					return this.$store.state.users.name
				},
				set(value){
					this.changename(value)
				}
			}
		},
		methods: {
	
			...mapMutations(["changepass","changename"]),
			...mapActions(["Login",'notice','getM','getUserInfo']),
		
			jizhu(value){
				console.log(value,"记住")
				if(value.detail.value[0]==="cb"){
					this.ju = true
					console.log((this.ju))
				}else{
					this.ju = false
					console.log((this.ju))
				}
			},
			//登录
			async goLogin() {
				const data = await this.Login({
					phonenumber: this.name,
					password: this.pass
				})
				console.log(data)
				if (data.code == 200) {
					// 跳转
					uni.switchTab({
						url: '/pages/mine/mine',
						success() {
							
						}
					});
					// 提示
					uni.showToast({
						title: '登录成功',
						duration: 2000,

					});
					// 保存token
					console.log(data.data.id, "看看")
					uni.setStorage({
						key: 'token',
						data: data.data.token,
						success: function() {
							console.log('保存token成功');
						}
					});
					//保存用户id
					uni.setStorage({
						key: 'userid',
						data: data.data.id,
						success() {
							console.log('保存用户id成功')
						}
					})
					this.notice({userId:uni.getStorageSync('userid')})
					this.getUserInfo()
					if(!this.ju) this.changepass("")
				} else {
					uni.showToast({
						title: '登录失败，密码或账号错误',
						duration: 2000,
						icon: "none"
					});
				}

			}



		}
	}
</script>

<style lang="scss" scoped>
	button::after {
		border: none
	}

	.bti {
		width: 750rpx;
		height: 80rpx;
		color: #323232;
		font-size: 40rpx;
		margin-bottom: 110rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.conter {
		width: 750rpx;
		margin-bottom: 164rpx;

		.box1 {
			width: 100%;
			/* border: 1px solid red; */
			padding: 0 40rpx;
			margin-bottom: 100rpx;
			.jizhu{
				padding: 30rpx;
			}
			.content {
				/* width: 750rpx; */
				height: 100rpx;
				padding: 20rpx;
				box-sizing: border-box;
				align-items: center;
				display: flex;
				text-align: 100rpx;

				.img {
					width: 80rpx;
					height: 75rpx;
					/* padding-right: 24rpx; */
				}

				;

				.input {
					width: 500rpx;
					height: 60rpx;
					color: #7a7979;
				}

				;

				.btn {
					/* width: 200rpx;
					height: 40rpx;
					margin: 0 auto;
					padding: 0 0 0 20rpx;
					border-radius: 20rpx;
					background: none;
					background-image: url(../../static/images/icon_zhuce_chacha@2x.png);
					background-size: 40rpx 40rpx;
					background-repeat: no-repeat;
					background-position: 140rpx 0; */
				}
			}
		}

		.box2 {
			width: 750rpx;

			.register {
				width: 670rpx;
				text-align: right;
				font-size: 24rpx;
				margin-bottom: 10rpx;
				color: #7a7979;
			}

			.tem1 {
				width: 700rpx;
				height: 100rpx;
				margin: 0 auto;
				margin-bottom: 10rpx;
				color: #fff;
				font-size: 32rpx;
				text-align: center;
				border-radius: 50rpx;
				line-height: 100rpx;
				// background-color: #1778E6;
			}

			.tem2 {
				width: 620rpx;
				height: 30rpx;
				margin: 0 auto;
				font-size: 24rpx;
				display: flex;

				.text1 {
					color: #7a7979;
				}

				;

				.text2 {
					font-weight: 500;
					color: #323232;
				}
			}
		}
	}

	.foot {
		width: 750rpx;

		.swper1 {
			width: 600rpx;
			color: #323232;
			margin: 0 auto;
			margin-bottom: 40rpx;
			font-size: 28rpx;
			text-align: center;
			line-height: 40rpx;
		}

		;

		.swper2 {
			width: 540rpx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-self: center;

			image {
				width: 80rpx;
				height: 80rpx;
			}
		}
	}
</style>
